<template>
  <div class="login">
    <!-- <h3>登录页</h3> -->
    <form action="" class="form">
      <h3>管理员登录</h3>
      <div class="opt">
        <el-input v-model="account" placeholder="请输入内容"></el-input>
      </div>
      <div class="opt">
        <el-input type="password" v-model="password" placeholder="请输入内容"></el-input>
      </div>
      <div class="opt">
        <el-checkbox v-model="checked">是否记住账号</el-checkbox>
      </div>
      <div class="opt" style="text-align: center;">
        <el-button @click.prevent="loginFn" type="primary">点击登录</el-button>
      </div>
    </form>
  </div>
</template>

<script>

import { Message } from 'element-ui';
import { adminLogin, host } from "../api/index";



export default {
  data() {
    return {
      account: "",
      password: "",
      checked: false
    };
  },
  methods: {
    async loginFn() {
      let account = this.account;
      let password = this.password;
      let checked = this.checked;
      if (account == "" || password == "") {
        // Element 弹窗
        Message({
          showClose: true,
          offset: 100,
          message: "输入框不能为空",
          type: "error"
        });
        return false;
      }
      //管理员登录
      await adminLogin({ account, password })
        .then(
          resData => {
            // console.log(resData)
            if (resData.code == 200) {
              let account = resData.account;
              let username = resData.username;
              let imgUrl = host + resData.imgUrl
              let loginTime = new Date().toLocaleString();
              this.$store.state.userData = {
                account,
                username,
                imgUrl,
                loginTime,
                // password: password,
                checked
              }
              let token = resData.token;
              // console.log({username, craeteAt,gender, token})
              localStorage.setItem("AUTO_TOKEN", token);
              Message({
                type: "success",
                message: "登录成功",
                showClose: true,
                offset: 100
              });
              // 延迟跳转
              setTimeout(() => {
                this.$router.replace({ path: "/home" }).catch(() => { })
              }, 150)
            }
            else {
              Message({
                type: "error",
                message: '账号或密码错误',
                showClose: true,
                offset: 100
              })
            }
          }, err => {
            Message({
              type: "error",
              message: '账号或密码错误',
              showClose: true,
              offset: 100
            })
            console.log(err)
          }
        )

    }
  },
  created() {
    let userData = this.$store.state.userData
    if (userData.checked) {
      this.account = userData.account,
        this.password = userData.password
    }
  }
};
</script>

<style scoped lang="less">
.login {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../assets/img/bg.webp);
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;

  .form {
    background-color: #fff;
    width: 420px;
    height: 300px;
    border-radius: 6px;
    padding: 20px;

    .opt {
      margin-top: 20px;
    }
  }
}
</style>